<template>
  <div id="complaints">
    <top-bar :title="title"></top-bar>
    <div class="complaints_bg">
      <div class="driver_box">
        <div class="driver_photo">
          <p>
            <img :src="driver_photoImg" />
          </p>
        </div>
        <div class="driver_car">
          <p>
            <span class="driver-name">{{getOrderInfoData?getOrderInfoData.driver_name:''}}</span>
            <span class="stars">
              <i :class="{'active':starsone}"></i>
              <i :class="{'active':starstwo}"></i>
              <i :class="{'active':starsthree}"></i>
              <i :class="{'active':starsfour}"></i>
              <i :class="{'active':starsfive}"></i>
            </span>
            <span class="dirver-score">{{getOrderInfoData?getOrderInfoData.driver_level:''}}</span>
          </p>
          <p>
            <span class="car-number">{{getOrderInfoData?getOrderInfoData.driver_number:''}}</span>
            <span class="car-brand">{{getOrderInfoData?getOrderInfoData.driver_carColor:''}} {{getOrderInfoData?getOrderInfoData.driver_car:''}}</span>
          </p>
        </div>
      </div>
      <div style="clear:both"></div>
      <div class="orderinformation_box">
        <ul class="orderinformation_list">
          <li>
            <md-icon name="snkc_xcqx_time" slot="left" class="snkc_xcqx_time"></md-icon>
            <span>{{getTime}}</span>
          </li>
          <li>
            <md-icon name="shangchedian" slot="left" class="shangchedian"></md-icon>
            <span>{{getOrderInfoData?getOrderInfoData.start_route:''}} {{getOrderInfoData?getOrderInfoData.origin:''}}</span>
          </li>
          <li>
            <md-icon name="xiachedian" slot="left" class="shangchedian"></md-icon>
            <span>{{getOrderInfoData?getOrderInfoData.end_route:''}} {{getOrderInfoData?getOrderInfoData.destination:''}}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="complaints_input">
      <textarea placeholder="请填写您的投诉内容……" v-model="complaintsTxt" maxlength="50"></textarea>
    </div>
    <div class="complaints_bottom">
      <p @click="complaintsBtn">提交投诉</p>
    </div>
  </div>
</template>
<script>
import '@/assets/svgs/shangchedian.svg';
import '@/assets/svgs/xiachedian.svg';
import '@/assets/svgs/snkc_xcqx_time.svg';
import { Tabs, Icon, Field, InputItem, Toast, Dialog } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import { mapGetters, mapActions, mapMutations } from 'vuex';
import http from '@/common/http';
var CryptoJS = require('crypto-js');
var moment = require('moment');
moment.locale('zh-cn');
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [InputItem.name]: InputItem
  },
  data() {
    return {
      title: '投诉',
      driver_photoImg: '',
      starsone: false,
      starstwo: false,
      starsthree: false,
      starsfour: false,
      starsfive: false,
      complaintsTxt: ''
    };
  },
  mounted() {
    // 获取订单详情
    if (this.$route.query.orderno) {
      this.getOrderInfo(this.$route.query.orderno).then(() => {
        this.driver_photoImg = this.getOrderInfoData.driver_show
          ? this.getOrderInfoData.driver_show
          : require('@/assets/imgs/snyc_tx.png'); // 司机头像
        // 点亮司机评分星星
        var driverLevel = parseInt(this.getOrderInfoData.driver_level);
        if (driverLevel === 1) {
          this.starsone = true;
        } else if (driverLevel === 2) {
          this.starsone = true;
          this.starstwo = true;
        } else if (driverLevel === 3) {
          this.starsone = true;
          this.starstwo = true;
          this.starsthree = true;
        } else if (driverLevel === 4) {
          this.starsone = true;
          this.starstwo = true;
          this.starsthree = true;
          this.starsfour = true;
        } else if (driverLevel === 5) {
          this.starsone = true;
          this.starstwo = true;
          this.starsthree = true;
          this.starsfour = true;
          this.starsfive = true;
        }
      });
    } else {
      Dialog.alert({
        title: '提示',
        content: '获取不到订单号',
        confirmText: '确定'
      });
    }
  },
  methods: {
    ...mapActions(['getOrderInfo']),
    // 提交投诉
    complaintsBtn() {
      if (!this.complaintsTxt) {
        Toast({
          content: '请输入投诉内容',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      var data = {
        order_no: this.$route.query.orderno,
        complaint_content: this.complaintsTxt
      };
      Loading.show();
      http.post('pakj/order/orderComplaint', data).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          Dialog.alert({
            title: '提示',
            content: '投诉成功',
            confirmText: '确定',
            onConfirm: () => {
              this.$router.push({
                name: 'OrderDetail',
                query: {
                  orderno: this.$route.query.orderno
                }
              });
            }
          });
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    }
  },
  computed: {
    ...mapGetters(['getOrderInfoData']),
    getTime() {
      var str = this.getOrderInfoData;
      var startMoment = '';
      if (!str) {
        return '';
      }
      let momstart = moment(str.travel_time, 'x');
      startMoment = momstart.calendar(null, {
        sameDay: '[今天] HH:mm',
        nextDay: '[明天] HH:mm',
        nextWeek: 'dddd HH:mm',
        lastDay: '[昨天] HH:mm',
        lastWeek: '[上] ddd HH:mm',
        sameElse: 'MMMDo HH:mm'
      });
      return startMoment;
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#complaints {
  height: 100vh;
  background-color: color-primary-background;
}

.complaints_bg {
  background-color: #fff;
}

.driver_box {
  margin: 20px 30px;
  padding-top: 30px;
}

.driver_photo {
  float: left;
}

.driver_photo p img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.driver_car {
  float: left;
}

.driver_car p {
  margin-top: 10px;
  margin-left: 24px;
}

.driver-name {
  font-size: 30px;
  color: #333;
}

.stars {
  margin-left: 16px;
}

.stars i {
  display: inline-block;
  width: 24px;
  height: 22px;
  background: url('../../assets/imgs/xcxq_icon_xing_dark@2x.png') no-repeat center center;
  background-size: 24px 22px;
}

.stars i.active {
  background-image: url('../../assets/imgs/xcxq_icon_xing_light@2x.png');
}

.dirver-score {
  font-size: 26px;
  color: #666;
  margin-left: 16px;
}

.car-number {
  font-size: 26px;
  color: #666;
}

.car-brand {
  font-size: 26px;
  color: #999;
  margin-left: 16px;
}

.snkc_xcqx_time {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}

.shangchedian {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}

.orderinformation_box {
  border-top: solid 1px #E0E0E0;
  margin-top: 24px;
}

.orderinformation_list {
  padding-top: 20px;
  padding-bottom: 20px;
}

.orderinformation_list li {
  margin: 0px 30px;
  font-size: 24px;
  color: #666;
  margin-top: 10px;
}

.complaints_input {
  background-color: #fff;
  margin-top: 20px;
  padding: 20px 30px;
}

.complaints_input textarea {
  border: none;
  resize: none;
  width: 100%;
  height: 160px;
}

.complaints_bottom {
  position: fixed;
  width: 100%;
  bottom: 20px;
}

.complaints_bottom p {
  background-color: #FF6917;
  margin: 0px 20px;
  height: 98px;
  line-height: 98px;
  font-size: 36px;
  color: #fff;
  text-align: center;
  border-radius: 10px;
}
</style>
